<template>
	<view class="container">
		<view class="search-bar">
			<input type="text" v-model="searchQuery" placeholder="搜索游戏..." @confirm="onSearch" confirm-type="search" />
			<button class="search-button" @click="onSearch">🔍</button>
		</view>
		<swiper class="carousel" autoplay="true" interval="3000" circular="true">
			<swiper-item v-for="(image, index) in images" :key="index">
				<image :src="image" class="carousel-image"></image>
			</swiper-item>
		</swiper>
		<h2>热门</h2>
		<view class="hot-section">
			<view class="hot-content">
				<view class="hot-main" @click="navigateToGameDetail" :style="{ backgroundImage: 'url(' + mainGameLogo + ')' }">
					<text class="hot-main-title">{{ mainGameName }}</text>
				</view>
				<view class="hot-games">
					<view class="hot-game" v-for="(game, index) in hotGames" :key="index" @click="navigateToGameDetail(game.game_id)" :style="{ backgroundImage: 'url(' + game.game_small_background + ')' }">
						<text class="hot-game-title">{{ truncateText(game.game_name, 8) }}</text>
					</view>
				</view>
			</view>
		</view>
		<h2>分类</h2>
		<scroll-view class="categories" scroll-x="true" scroll-with-animation="true">
			<view class="category" v-for="(category, index) in categories" :key="index" @click="navigateToCategory(category.title)">
				<text class="category-title">{{ category.title }}</text>
				<view class="games">
					<view class="game" 
						  v-for="(game, gameIndex) in category.games" 
						  :key="gameIndex" 
						  :style="{ backgroundImage: 'url(' + game.game_logo + ')' }">
					</view>
				</view>
			</view>
		</scroll-view>
		<h2>今日推荐</h2>
		<view class="highlight-card" 
			  v-for="(game, index) in recommendedGames" 
			  :key="index" 
			  @click="navigateToGameDetail(game.game_id)">
			<image class="highlight-image" :src="game.game_small_background"></image>
			<view class="highlight-content">
				<view class="highlight-footer">
					<view class="highlight-left">
						<image class="highlight-icon" :src="game.game_logo"></image>
						<view class="highlight-info">
							<text class="highlight-app-name">{{ truncateText(game.game_name, 8) }}</text>
							<text class="highlight-app-desc">{{ truncateText(game.game_description, 12) }}</text>
						</view>
					</view>
					<button class="highlight-button" @click.stop="startGame(game.game_id)">开始游戏</button>
				</view>
			</view>
		</view>
		<button class="floating-button" @click="navigateToChat">问</button>
	</view>
</template>
<script>
import { games } from '../../utils/gameData.js'; // 导入游戏数据
export default {
	data() {
		return {
			searchQuery: games[0].game_name, // 默认显示第一个游戏的名称
			images: [
				'/static/banner/banner.jpg',
				'/static/banner/banner02.jpg'
				],
			hotGames: games.slice(1, 4), // 从ID为2的游戏开始，取3个游戏
			mainGameLogo: games.find(game => game.game_id === "1").game_small_background, 
			mainGameName: games.find(game => game.game_id === "1").game_name,
			categories: [
				{ 
					title: '射击类', 
					games: games.filter(game => 
						Array.isArray(game.game_genre) 
							? game.game_genre.includes('射击类')
							: game.game_genre === '射击类'
					).slice(0, 4)
				},
				{ 
					title: '益智类', 
					games: games.filter(game => 
						Array.isArray(game.game_genre) 
							? game.game_genre.includes('益智类')
							: game.game_genre === '益智类'
					).slice(0, 4)
				},
				{ 
					title: '模拟类', 
					games: games.filter(game => 
						Array.isArray(game.game_genre) 
							? game.game_genre.includes('模拟类')
							: game.game_genre === '模拟类'
					).slice(0, 4)
				}
			],
			recommendedGames: games.slice(0, 3), // 取前3个游戏作为推荐
		}
	},
	methods: {
		onSearch() {
			if (!this.searchQuery.trim()) {
				this.searchQuery = games[0].game_name; // 如果搜索框为空，恢复默认值
				return;
			}
			
			uni.navigateTo({
				url: `/pages/lobby/searchResult?query=${encodeURIComponent(this.searchQuery)}`
			});
		},
		navigateToChat() {
			uni.navigateTo({
				url: '/pages/chat/chat'
			});
		},
		navigateToGameDetail(gameId) {
			uni.navigateTo({
				url: `/pages/lobby/gameDetail?id=${gameId}`
			});
		},
		truncateText(text, length = 10) {
			if (text && text.length > length) {
				return text.substring(0, length) + '...';
			}
			return text;
		},
		navigateToCategory(category) {
			uni.navigateTo({
				url: `/pages/lobby/category?category=${encodeURIComponent(category)}`
			});
		},
		startGame(gameId) {
			const game = games.find(g => g.game_id === gameId);
			if (game && game.game_link_url) {
				uni.navigateTo({
					url: game.game_link_url
				});
			}
		}
	}
}
</script>
<style>
	.container {
		padding: 20px;
		background: #1E1E2E;
		min-height: 100vh;
	}
	.search-bar {
		background: rgba(45, 45, 68, 0.6);
		backdrop-filter: blur(10px);
		border: 1px solid rgba(110, 108, 137, 0.3);
		border-radius: 16px;
		margin: 10px 0 20px;
		padding: 6px 8px 6px 16px;
		display: flex;
		align-items: center;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
	}
	.search-bar:focus-within {
		border-color: rgba(151, 150, 184, 0.5);
		box-shadow: 0 4px 25px rgba(151, 150, 184, 0.15);
		transform: translateY(-1px);
	}
	input[type="text"] {
		flex: 1;
		background: transparent !important;
		border: none !important;
		color: #9796B8 !important;
		font-size: 15px;
		padding: 8px 0;
		margin-right: 8px;
	}
	input[type="text"]::placeholder {
		color: rgba(110, 108, 137, 0.8) !important;
		font-size: 14px;
	}
	.search-button {
		background: #4D4C6D !important;
		width: 36px;
		height: 36px;
		border-radius: 12px !important;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none !important;
		padding: 0;
		font-size: 18px;
		color: #9796B8 !important;
		transition: all 0.15s ease;
	}
	.search-button:active {
		transform: scale(0.9);
		background: #6E6C89 !important;
	}
	.carousel {
		border-radius: 20px;
		overflow: hidden;
		margin-bottom: 25px;
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
	}
	.carousel-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	h2 {
		color: #9796B8;
		font-size: 20px;
		margin: 25px 0 15px;
		padding-left: 15px;
		border-left: 4px solid #6E6C89;
	}
	.hot-section {
		background: #2D2D44;
		border: 1px solid #6E6C89;
		border-radius: 20px;
		padding: 15px;
		margin-bottom: 20px;
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	}
	.hot-content {
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		gap: 15px;
	}
	.hot-main {
		background-size: cover;
		background-position: center;
		border-radius: 15px;
		position: relative;
		min-height: 200px;
		transition: transform 0.15s ease;
	}
	.hot-main:active {
		transform: scale(0.98);
	}
	.hot-main::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.7));
	}
	.hot-main-title {
		position: absolute;
		bottom: 15px;
		left: 15px;
		color: #fff;
		font-size: 18px;
		font-weight: bold;
		text-shadow: 0 2px 4px rgba(0,0,0,0.3);
	}
	.hot-games {
		display: grid;
		grid-template-rows: repeat(3, 1fr);
		gap: 10px;
	}
	.hot-game {
		background-size: cover;
		background-position: center;
		border-radius: 12px;
		position: relative;
		height: 60px;
		transition: transform 0.15s ease;
	}
	.hot-game:active {
		transform: scale(0.95);
	}
	.hot-game::before {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0.3));
	}
	.hot-game-title {
		position: absolute;
		left: 15px;
		top: 50%;
		transform: translateY(-50%);
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		text-shadow: 0 2px 4px rgba(0,0,0,0.3);
	}
	.categories {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		margin-bottom: 20px;
		overflow-x: auto;
		width: 100%;
		white-space: nowrap;
		padding: 10px 0;
	}
	.category {
		display: inline-block;
		width: 33vw;
		background: #2D2D44;
		border: 1px solid #6E6C89;
		border-radius: 12px;
		padding: 12px;
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
		margin-right: 12px;
		transition: transform 0.15s ease;
		overflow: hidden;
	}
	.category:active {
		transform: scale(0.98);
	}
	.category-title {
		font-size: 16px;
		font-weight: bold;
		color: #9796B8;
		margin-bottom: 12px;
		text-align: center;
		padding-bottom: 8px;
		border-bottom: 1px solid #6E6C89;
	}
	.games {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
	.game {
		background-size: cover;
		background-position: center;
		border-radius: 8px;
		position: relative;
		padding-top: 100%;
		overflow: hidden;
		transition: transform 0.15s ease;
	}
	.game:active {
		transform: scale(0.95);
	}
	.game::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
		z-index: 1;
	}
	.highlight-card {
		background: #2D2D44;
		border: 1px solid #6E6C89;
		border-radius: 20px;
		overflow: hidden;
		margin-bottom: 15px;
	}
	.highlight-card:active {
		transform: scale(0.98);
	}
	.highlight-image {
		width: 100%;
		height: 200px;
		object-fit: cover;
	}
	.highlight-content {
		padding: 15px;
	}
	.highlight-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}
	.highlight-left {
		display: flex;
		align-items: center;
		gap: 12px;
		flex: 1;
	}
	.highlight-icon {
		width: 45px;
		height: 45px;
		border-radius: 10px;
		flex-shrink: 0;
	}
	.highlight-info {
		flex: 1;
		min-width: 0;
	}
	.highlight-app-name {
		color: #9796B8;
		font-size: 16px;
		font-weight: bold;
		display: block;
		margin-bottom: 4px;
	}
	.highlight-app-desc {
		color: #6E6C89;
		font-size: 13px;
		display: block;
	}
	.highlight-button {
		background: #4D4C6D;
		color: #9796B8;
		border: none;
		border-radius: 20px;
		padding: 6px 16px;
		font-size: 14px;
		transition: all 0.2s ease;
		flex-shrink: 0;
		height: 32px;
		line-height: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.highlight-button:active {
		transform: scale(0.95);
		background: #5D5C7D;
	}
	.floating-button {
		position: fixed;
		bottom: 10vh;
		right: 20px;
		width: 50px;
		height: 50px;
		border-radius: 25px;
		background: #4D4C6D;
		color: #9796B8;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		transition: transform 0.15s ease;
	}
	.floating-button:active {
		transform: scale(0.9);
	}
</style> 
